{include file="header/index" /}
<div class="container whitebg agreement">
	<!-- 工单类型 -->
	<ul class="nav nav-tabs" role="tablist">
		<li><i class="glyphicon glyphicon-menu-hamburger" style="margin-top: 13px;"></i></li>
		<li role="presentation" class="active" id="remclass">
			<a href="#whole" aria-controls="whole" onclick="getk(0)" role="tab" data-toggle="tab">全部</a>
			<span class="fr">|</span>
		</li>
		<!--将工单类型循环取出-->
		{foreach $type as $k => $v}
		<li role="presentation">
			<a href="#install" id="type_{$k}" aria-controls="install" class="qieh{$k}" onclick="getk({$k})" role="tab" data-toggle="tab" data-status="{$k}">{$v}</a>
			<span class="fr">|</span>
		</li>
		{/foreach}

		<!--隐藏域，用来装工单类型id-->
		<input type="hidden" name="status" value="0" />

	</ul>

	<!--模糊搜索-->
	<form class="form-inline mt20 mb20" action="" method="post">
		<div class="form-group">
			<label>下单时间</label>
			<input class="form-control input-time" type="text" name="startTime" id="datetimeStart" readonly class="form_datetime">
			<input class="form-control input-time" type="text" name="endTime" id="datetimeEnd" readonly class="form_datetime">
		</div>
		<div class="form-group">
			<label>业务类型</label>
			<select id="type" class="form-control input-min">
				<option value="" selected="selected">请选择</option>
				{foreach $workType as $k=>$v}
				<option value="{$k}">{$v}</option>
				{/foreach}
			</select>
		</div>
		<div class="form-group mr20">
			<label>所属区域</label>
			<select class="form-control input-min" id="_province" onchange="showcity()">
				<option value="">--请选择省份--</option>
			</select>
			<select class="form-control input-min" id="_city" onchange="showareas()">
				<option value="">--请选择城市--</option>
			</select>
			<select class="form-control input-min" id="_area">
				<option value="">--请选择区/县--</option>
			</select>
		</div>
	</form>
	<form class="form-inline mt20 mb20" action="" method="post">
		<div class="form-group">
			<input type="text" class="form-control input-min" id="order_number" placeholder="请输入工单号">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="username" placeholder="请输入用户名">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="telphone" placeholder="请输入联系电话">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="engineers_name" placeholder="请输入工程人员">
		</div>
		<div class="form-group">
			<input type="text" class="form-control input-min" id="engineers_number" placeholder="请输入工程编号">
		</div>
		<div class="form-group mr20">
			<label>处理状态</label>
			<select id="workStatus" class="form-control input-min">
				{if condition='($workorderstatus == 3)'}
				<option value="" selected="selected">请选择处理状态</option>
				<option value="1">无效</option>
				<option value="2">前台未处理</option>
				<option value="3">前台已确认</option>
				{else /}
				<option value="" selected="selected">请选择处理状态</option>
				<option value="5">工程部未指派工程人员</option>
				<option value="7">工程人员未接单</option>
				<option value="8">工程人员服务中</option>
				<option value="9">工程人员已完成</option>
				<option value="10">前台未回访</option>
				<option value="11">前台已回访，未完成</option>
				<option value="12">前台已回访，已完成</option>
				<option value="13">已完成</option>
				{/if}
			</select>
		</div>
		<input type="hidden" id="UpdateTime" value="">
		<button type="button" id="search" class="btn btn-default input-Btn">搜索</button>
	</form>

	<!-- Tab panes -->
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="whole">

			<table class="table table-bordered">
				<tr>
					<th>工单号</th>
					<th>户名</th>
					<th>联系电话</th>
					<th>业务类型</th>
					<th>服务地址</th>
					<th>所属区域</th>
					<th>金额</th>
					<th>换芯时间</th>
					<th>续费周期</th>
					<th>处理状态</th>
					<th>工程人员</th>
					<th>操作</th>
				</tr>

				<!--字符串拼接-->
				<tbody id="list">
				{volist name="data" id="k"}
				<tr>
					<td>{$k.order_number}</td>
					<td>{$k.username}</td>
					<td>{$k.telphone}</td>
					<td>{$k.business_id}</td>
					<td>{$k.service_address}</td>
					<td>{$k.a_name}</td>
					<td>￥{$k.combo_money}元</td>
					<td>{$k.for_core_time}</td>
					<td>{$k.renew_date}</td>
					<td onclick="usrePopup({$k.work_order_id})">
						<span class="selecttxt cursor col-127" >{$k.work_order_status}</span>
					</td>
					<td>{$k.engineers_name}</td>
					<td>
						<a href="#">查看</a>
						<a href="#">修改</a>
					</td>
				</tr>
				{/volist}
				</tbody>

				<input type="hidden" value="" name="workOrderStatus" />
			</table>

			<div class="clearfix"></div>
		</div>

	</div>


	<!--用来装是未指派还是已指派对应值，用于修改状态时判断-->
	<input type="hidden" value="{$workorderstatus}" name="workorderstatus" />


	<!--分页显示-->
	<div class="clearfix" style="float:right;margin: 0 auto;">
		<span class="fl mt5">共<b id="total">{$count}</b>条数据，</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
	</div>
	<!-- 加载动画 -->
	<div class="spiner-example">
		<div class="sk-spinner sk-spinner-three-bounce">
			<div class="sk-bounce1"></div>
			<div class="sk-bounce2"></div>
			<div class="sk-bounce3"></div>
		</div>
	</div>

</div>
</body>
<script>

    //处理工程人员传输显示订单
    var gcry = $("#gcry", window.parent.document).val();
    var status = $("#gstatus", window.parent.document).val();
    $("#engineers_number").val(gcry);
    if(status == 13){
        $("#workStatus option[value='13']").attr("selected","selected");
    }if(status == 8){
        $("#workStatus option[value='8']").attr("selected","selected");
    }
	//修改状态信息
	function usrePopup(id){
        var workorderstatus = $("input[name='workorderstatus']").val();
        // 发送ajax请求获取备注信息
		$.getJSON("{:url('/operation/workorder/getremarks')}",{work_order_id:id},function(data){
            // 获取工单类型配置信息，转换为对象
            var status_obj=<?php  echo json_encode($work_order_status); ?>;
            var status_arr = eval(status_obj);
            var str = "";
            if({$workorderstatus} == 3){
                str += "<option value=1>无效</option>";
                str += "<option value=2>前台未处理</option>";
                str += "<option value=3>前台已确认</option>";
            }else{
                str += "<option value=1>无效</option>";
                str += "<option value=2>前台未处理</option>";
                str += "<option value=3>前台已确认</option>";
                str += "<option value=5>工程部未指派工程人员</option>";
                str += "<option value=7>工程人员未接单</option>";
                str += "<option value=8>工程人员服务中</option>";
                str += "<option value=9>工程人员已完成</option>";
                str += "<option value=10>前台未回访</option>";
                str += "<option value=11>前台已回访，未完成</option>";
                str += "<option value=12>前台已回访，已完成</option>";
//                if(data[0].work_order_status < 4 && data[0].work_order_status != 1){
//                    str += "<option value=1>无效</option>";
//                }
//                for(var i=data[0].work_order_status+1;i<=getJsonLength(status_arr);i++){
//                    str +="<option value="+i+">"+status_arr[i]+"</option>";
//                }
            }
				var html ='<div class="stateWorkorder">';
				html +='<div>';
				html +='<p class="clearfix">';
				html +='<label class="fl">处理状态</label>';
				html +='<select id="_orderStatus'+id+'">';
				html +='<option value="">选择状态</option>';
				html +=str;

				html +='</select>';
				html +='</p>';
				html +='<p class="clearfix">';
				html +='<label  class="fl">备注</label>';
				html +='<textarea id="remarks'+id+'"></textarea>';
				html +='</p>';
				html +='<p class="state-Btn">';
				html +='<button onclick="savesuccess('+id+','+workorderstatus+')" type="button" class="btn btn-primary">保存</button>';
				html +='<button onclick="layuihide()" type="button" class="btn btn-default">取消</button>	';
				html +='</p>';
		 		html +='<ul class="">';
            $.each(data,function(k,v){
                html +='<li class="clearfix">';
                html +='<span class="state-lis-left fl ellipsis">' + v.remarks + '</span>';
                html +='<span class="state-lis-left fr ">备注人：'+ v.username +'  时间：' + v.operating_time + '</span>';
                html +='</li>';
            });
		 		html +='</ul>';
		 		html +='</div>';
				html +='</div>';
            	html +='<input name="workOrderStatus'+id+'" value="'+id+'" type="hidden">';
				top.layer.open({
				  type: 1,
				  title: '处理状态',
				  skin: 'layui-layer-demo', //样式类名
				  closeBtn: 0, //不显示关闭按钮
				  anim: 2,
				  area: ['600px', '420px'], //宽高
				  shadeClose: true, //开启遮罩关闭			  
				  content:html,
				});
        });
	}


    // 计算json对象长度
    function getJsonLength(jsonData){
        var jsonLength = 0;
        for(var item in jsonData){
            jsonLength++;
        }
        return jsonLength;
    }


    // 三级联动
    $(function() {
        // ajax 请求 获取省数据
        $.post("{:url('/admin/Three/province')}", {}, function(data) {
            $("#_province").html('');
            var str = '<option value="">--请选择省份--</option>';
            $.each(data, function(key, val) {
                str += '<option value="' + val.id + '" >' + val.area_name + '</option>';
            })
            $("#_province").html(str);
        }, 'json');

    });

    // 获取市数据
    function showcity() {
        // 获取选中省 对应的id
        var id = $("#_province option:selected").val();
        var str = '<option value="">--请选择城市--</option>';
        var str1 = '<option value="">--请选择区/县--</option>';
        $("#_city").html(str);
        $("#_area").html(str1);
        //发送ajax请求  获取省对应的市
        $.getJSON("{:url('/admin/Three/city')}", {
            parent_id: id
        }, function(data) {
            $("#_city").html('');
            var str = '<option value="">--请选择城市--</option>';
            $.each(data, function(k, v) {
                str += '<option value="' + v.id + '">' + v.area_name + '</option>';
            })
            $("#_city").html(str);
        });
    }
    // 获取 区/县数据
    function showareas() {
        // 获取选中市 对应的id
        var id = $("#_city option:selected").val();
        // 发送ajax请求 获取市对应的区县
        $.getJSON("{:url('/admin/Three/areas')}", {
            city_id: id
        }, function(data) {
            $("#_area").html('');
            var str = '<option value="">--请选择区/县--</option>';
            $.each(data, function(k, v) {
                str += '<option value="' + v.id + '">' + v.area_name + '</option>';
            });
            $("#_area").html(str);
        })
    }

    // 模糊搜索按钮点击事件
    $("#search").click(function() {
        // 获取工单类型隐藏域对应的值
        var workType = $("input[name='status']").val();

        // 清楚  全部按钮 的class样式
        $("#remclass>li").removeClass('active');
        // 给搜索的工单类型加入class
        $("#qie" + workType).parent('li').addClass('active');

        // 调用分页
        //            Ajaxpage(startTime,endTime,order_number,username,contract_no,workStatus,province,city,area);
        Ajaxpage();
    });

    // 工单类型切换
    function getk(id) {
        //清空checkbox
        $("input[type=checkbox]").prop("checked", false);
        // 清空搜索数据
        $("#datetimeStart").val('');
        $("#datetimeEnd").val('');
        $("#order_number").val('');
        $("#username").val('');
        $("#telphone").val('');
        $("#engineers_name").val('');
        $("#engineers_number").val('');
        $("#workStatus").val('');
        $("#type").val('');
        $("#_province").val('');
        $("#_city").val('');
        $("#_area").val('');

        // 将id存入隐藏域
        $("input[name='status']").val(id);

        // 调用分页
        Ajaxpage();
    }



    //laypage分页
    Ajaxpage();
    // curr 获取当前页面数
    function Ajaxpage(curr) {
        // 获取模糊搜索数据
        var startTime = $("#datetimeStart").val();
        var endTime = $("#datetimeEnd").val();
        var order_number = $("#order_number").val();
        var username = $("#username").val();
        var telphone = $("#telphone").val();
        var engineers_name = $("#engineers_name").val();
        var engineers_number = $("#engineers_number").val();
        var workStatus = $("#workStatus").val();
        var type = $("#type").val();
        var province = $("#_province").val();
        var city = $("#_city").val();
        var area = $("#_area").val();

        var key = $('#key').val();
        // 获取隐藏域里面的类型对应数字
        var status = $('input[name="status"]').val();

        // 发送ajax请求
        $.getJSON('{:url("/operation/workorder/index")}', {
            page: curr || 1,
            key: key,
            status: status,
            startTime: startTime,
            endTime: endTime,
            order_number: order_number,
            username: username,
            telphone: telphone,
            engineers_name: engineers_name,
            engineers_number: engineers_number,
            workStatus: workStatus,
            type: type,
            province: province,
            city: city,
            area: area,
            workorderstatus:{$workorderstatus}
        }, function(data) {
//								console.log(data);
            $(".spiner-example").css('display', 'none'); //数据加载完关闭动画
            if(data == '') {
                // 替换总的数据
                document.getElementById('total').innerText = 0;
                $("#list").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
            } else {
                // 替换总的数据
                document.getElementById('total').innerText = data[0].count;
                // 清空数据
                $("#list").html('');
                // 将数据循环，拼接
                var str = '';
                $.each(data, function(key, val) {
                    var engineers_name= val.engineers_name==null ? '未指派' : val.engineers_name;
                    str += '<tr>';
                    str += '<td>' + val.order_number + '</td>';
                    str += '<td>' + val.username + '</td>';
                    str += '<td>' + val.telphone + '</td>';
                    str += '<td>' + val.business_id + '</td>';
                    str += '<td>' + val.service_address + '</td>';
                    str += '<td>' + val.a_name + '</td>';
                    str += '<td>'+"￥" + val.combo_money + "元" + '</td>';
                    str += '<td>' + val.for_core_time + '</td>';
                    str += '<td>' + val.renew_date + '</td>';
                    str += '<td onclick="usrePopup(' + val.work_order_id + ')">';
                    str += '<span class="selecttxt cursor col-127">' + val.work_order_status + '</span>';
                    str += '<td>' + engineers_name + '</td>';
                    str += '<td>';
                    str += '<a href="/operation/workorder/detail/id/' + val.work_order_id + '">查看</a>&nbsp;';
                    str += '<a href="/operation/workorder/edit/wid/'+val.work_order_id+'/uid/'+val.user_id+'/cid/'+val.contract_id+'/who/'+val.who+'">修改</a>';
                    str += '</td>';
                    str += '</tr>';
                });
                // 将拼接的数据输出在页面
                $("#list").html(str);

                laypage({
                    cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
                    pages: data[0].allPage, //总页数
                    skip: true, //是否开启跳页
                    skin: '#337ab7', //分页组件颜色
                    curr: curr || 1,
                    first: '首页', //若不显示，设置false即可
                    last: '尾页', //若不显示，设置false即可
                    groups: 3, //连续显示分页数
                    jump: function(obj, first) {
                        if(!first) {
                            Ajaxpage(obj.curr)
                        }
                        $('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
						inputlength();
                    }
                });
            }
        });
    }
</script>

</html>

<script type="text/javascript">

	/*
	 *操作台传值过来
	 */
    //--------------------------------------start---------------------------------------
    var assigned = $("#assigned", window.parent.document).val();
    var startUpdateTime = $("#startUpdateTime", window.parent.document).val();
    if (startUpdateTime != ''){
        $("#UpdateTime").val(startUpdateTime);
    }
    if (assigned == 'yes'){
        $("#MenuShowList li:eq(1)", window.parent.document).click();
        var work_order_type = $("#work_order_type", window.parent.document).val();
        if (work_order_type != ''){
            $("#type_"+work_order_type).click();
            var work_order_status = $("#work_order_status", window.parent.document).val();
            $("#workStatus").val(work_order_status);
            $("#search", window.parent.document).click();
            startUpdateTime = '';
            $("#assigned", window.parent.document).val('');
        }
    }else {
        $("#MenuShowList li:eq(0)", window.parent.document).click();
        var work_order_type = $("#work_order_type", window.parent.document).val();
        if (work_order_type != ''){
            $("#type_"+work_order_type).click();
            var work_order_status = $("#work_order_status", window.parent.document).val();
            $("#workStatus").val(work_order_status);
            $("#search", window.parent.document).click();
            startUpdateTime = '';
            $("#assigned", window.parent.document).val('');
        }
    }
    //--------------------------------------end---------------------------------------


    //头部选项卡
    $('#myTabs a').click(function(e) {
        e.preventDefault()
        $(this).tab('show')
    })

    //日期选择
    $("#datetimeStart").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
    });
    $("#datetimeEnd").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
    });


</script>